<template>
  <div class="content-wrap information-basic" v-loading="loading">
    <div class="content-form tag-scrollbar">
      <template v-if="editable">
        <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="0">
          <el-row :gutter="cardGutter">
            <el-col :span="8">
              <div class="row1 clearfix">
                <div class="star"></div>
                <div class="row1-left linear-cyan">
                  <icon-svg name="iconKind"></icon-svg><br />
                  标签类别
                </div>
                <div class="edit-content hq-content">
                  <el-form-item prop="tagKindId">
                    <el-radio-group v-model="editForm.tagKindId" :disabled="!editable" class="tag-scrollbar">
                      <el-radio v-for="item in $dictList('tag_kind')" :key="item.key" :label="item.key">
                        {{ item.value }}
                      </el-radio>
                      <br />
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="row1 clearfix">
                <div class="star"></div>
                <div class="row1-left linear-cyan">
                  <icon-svg name="iconHq"></icon-svg><br />
                  统计粒度
                </div>
                <div class="edit-content hq-content">
                  <el-form-item prop="hqTagId">
                    <el-radio-group v-model="editForm.hqTagId" :disabled="!editable" class="tag-scrollbar">
                      <el-radio v-for="item in $dictList('is_hq_tag')" :key="item.key" :label="item.key">
                        {{ item.value }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="row1 clearfix">
                <div class="star"></div>
                <div class="row1-left linear-cyan">
                  <icon-svg name="iconClient"></icon-svg><br />
                  客户统计范围
                </div>
                <div class="edit-content range-content">
                  <el-form-item prop="clientStatRange">
                    <el-radio-group v-model="editForm.clientStatRange" :disabled="!editable" class="tag-scrollbar">
                      <el-radio v-for="item in $dictList('client_stat_range')" :key="item.key" :label="item.key">
                        {{ item.value }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="row1 clearfix">
                <div class="star"></div>
                <div class="row1-left linear-purpose">
                  <icon-svg name="iconRequirePlatform"></icon-svg><br />
                  上线平台
                </div>
                <div class="edit-content">
                  <el-form-item prop="appPlfms">
                    <el-checkbox-group v-model="editForm.appPlfms" class="tag-scrollbar">
                      <el-checkbox v-for="item in platforms" :key="item.appPlfmId" :label="item.appPlfmId">
                        {{ item.appPlfmNm }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="row1 clearfix">
                <div class="star"></div>
                <div class="row1-left linear-purpose">
                  <icon-svg name="iconMount"></icon-svg><br />
                  唯一标识
                </div>
                <div class="edit-content">
                  <el-form-item prop="identifierFlag">
                    <el-switch
                      v-model="editForm.identifierFlag"
                      active-color="#13ce66"
                      :active-value="1"
                      :inactive-value="0"
                      active-text="是"
                      inactive-text="否"
                      :disabled="!editable"
                    ></el-switch>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="row1 clearfix">
                <div class="row1-left linear-purpose row1-title">
                  <icon-svg name="iconRequireDt"></icon-svg><br />
                  实际上线日期
                </div>
                <div class="edit-content row1-content">
                  {{ tagInfo.actRolloutDt || '暂无' }}
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="card row2">
                <div class="star"></div>
                <div class="title">
                  <icon-svg name="iconStory"></icon-svg><br />
                  标签故事
                </div>
                <div class="content blue">
                  <el-form-item prop="tagStory">
                    <el-input
                      placeholder="请输入标签故事"
                      v-model="editForm.tagStory"
                      type="textarea"
                      :maxlength="1000"
                      :rows="5"
                      :show-word-limit="true"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="card row2">
                <div class="star"></div>
                <div class="title">
                  <icon-svg name="iconBizstmt"></icon-svg><br />
                  业务口径
                </div>
                <div class="content blue">
                  <el-form-item prop="bizStmt">
                    <el-input
                      placeholder="请输入业务口径"
                      v-model="editForm.bizStmt"
                      type="textarea"
                      :maxlength="1000"
                      :rows="5"
                      :show-word-limit="true"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="card row2">
                <div class="title">
                  <icon-svg name="iconItstmt"></icon-svg><br />
                  技术口径
                </div>
                <div class="content blue">
                  <el-form-item prop="itStmt">
                    <el-input
                      placeholder="请输入技术口径"
                      v-model="editForm.itStmt"
                      type="textarea"
                      :maxlength="3000"
                      :rows="5"
                      :show-word-limit="true"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-else>
        <el-row :gutter="cardGutter">
          <el-col :span="8">
            <div class="row1 clearfix">
              <div class="row1-left linear-cyan row1-title">
                <icon-svg name="iconKind"></icon-svg><br />
                标签类别
              </div>
              <div class="edit-content row1-content">
                {{ tagInfo.tagKind }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="row1 clearfix">
              <div class="row1-left linear-cyan row1-title">
                <icon-svg name="iconHq"></icon-svg><br />
                统计粒度
              </div>
              <div class="edit-content row1-content">
                {{ tagInfo.hqTag }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="row1 clearfix">
              <div class="row1-left linear-cyan row1-title">
                <icon-svg name="iconClient"></icon-svg><br />
                客户统计范围
              </div>
              <div class="edit-content row1-content">
                {{ tagInfo.clientStatRange }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="row1 clearfix">
              <div class="row1-left linear-purpose row1-title">
                <icon-svg name="iconRequirePlatform"></icon-svg><br />
                上线平台
              </div>
              <div class="edit-content row1-content">
                <div class="over_hidden tag-scrollbar">
                  <span v-for="(item, index) in tagInfo.appPlfms" :key="index" class="card-item">
                    <icon-svg name="iconPlatform"></icon-svg>{{ item }}
                  </span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="row1 clearfix">
              <div class="row1-left linear-purpose row1-title">
                <icon-svg name="iconMount"></icon-svg><br />
                唯一标识
              </div>
              <div class="edit-content row1-content">
                {{ tagInfo.identifierFlag ? '是' : '否' }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="row1 clearfix">
              <div class="row1-left linear-purpose row1-title">
                <icon-svg name="iconRequireDt"></icon-svg><br />
                实际上线日期
              </div>
              <div class="edit-content row1-content">
                {{ tagInfo.actRolloutDt || '暂无' }}
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card row2">
              <div class="title">
                <icon-svg name="iconStory"></icon-svg><br />
                标签故事
              </div>
              <div class="content blue">
                <div class="over_hidden tag-scrollbar">
                  <el-input
                    placeholder="暂无内容"
                    v-model="tagInfo.tagStory"
                    type="textarea"
                    :rows="5"
                    disabled
                  ></el-input>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card row2">
              <div class="title">
                <icon-svg name="iconBizstmt"></icon-svg><br />
                业务口径
              </div>
              <div class="content blue">
                <div class="over_hidden tag-scrollbar">
                  <el-input
                    placeholder="暂无内容"
                    v-model="tagInfo.bizStmt"
                    type="textarea"
                    :rows="5"
                    disabled
                  ></el-input>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card row2">
              <div class="title">
                <icon-svg name="iconItstmt"></icon-svg><br />
                技术口径
              </div>
              <div class="content blue">
                <div class="over_hidden tag-scrollbar">
                  <el-input
                    placeholder="暂无内容"
                    v-model="tagInfo.itStmt"
                    type="textarea"
                    :rows="5"
                    disabled
                  ></el-input>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </template>
    </div>
    <div class="content-handler" v-if="tagStatus === 50 && !isModify">
      <el-button type="primary" v-if="!editable" @click="changeEdit(true)">编辑</el-button>
      <el-button v-if="editable" @click="changeEdit(false)">取消</el-button>
      <el-button type="primary" v-if="editable" @click="submit">保存</el-button>
    </div>
    <tag-text-dialog ref="tagTextDialog"></tag-text-dialog>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
export default {
  props: {
    tagId: {
      type: String,
      required: true,
      default: ''
    },
    tagStatus: {
      type: Number,
      default: 50
    },
    isModify: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      editable: false,
      platforms: [],
      editForm: {
        tagKindId: '',
        appPlfms: [],
        hqTagId: '',
        clientStatRange: '',
        tagStory: '',
        bizStmt: '',
        itStmt: '',
        identifierFlag: ''
      },
      editFormRules: {
        tagKindId: [{ required: true, message: '标签类别不能为空', trigger: 'change' }],
        appPlfms: [{ required: true, message: '至少选择一项', trigger: 'change' }],
        hqTagId: [{ validator: this.$checkBoolNum('统计粒度必须选择'), trigger: 'change' }],
        clientStatRange: [{ validator: this.$checkBoolNum('客户统计范围必须选择'), trigger: 'change' }],
        tagStory: [{ required: true, message: '标签故事不能为空', trigger: 'blur' }],
        bizStmt: [{ required: true, message: '业务口径不能为空', trigger: 'blur' }]
      },
      formInfo: {},
      tagInfo: {
        tagNm: '',
        tagKind: '',
        hqTag: '',
        clientStatRange: '',
        actRolloutDt: '',
        enabledDt: '',
        disableDt: '',
        appPlfms: [],
        tagStory: '',
        bizStmt: '',
        itStmt: '',
        identifierFlag: ''
      }
    }
  },
  watch: {
    tagId(id) {
      if (id) this.getDetail()
    }
  },
  computed: {
    cardGutter() {
      let gutter = 50
      let windowWidth = window.innerWidth || document.body.clientWidth
      if (windowWidth > 1280 && windowWidth <= 1600) gutter = 20
      else if (windowWidth <= 1280) gutter = 10
      return gutter
    }
  },
  created() {
    this.getPlatforms()
  },
  methods: {
    getPlatforms() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astAppPlatform/getAll'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.platforms = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getDetail() {
      this.$ajax({
        url: this.$ajax.setUrl(`ast/astTag/getBaseInfo/${this.tagId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.editForm = {
            tagKindId: data.data.tagKindId,
            appPlfms: [],
            hqTagId: data.data.hqTagId,
            clientStatRange: data.data.clientStatRangeId,
            tagStory: data.data.tagStory,
            bizStmt: data.data.bizStmt,
            itStmt: data.data.itStmt,
            identifierFlag: data.data.identifierFlag
          }
          this.tagInfo = {
            tagNm: data.data.tagNm,
            tagKind: data.data.tagKind,
            hqTag: data.data.hqTag,
            clientStatRange: data.data.clientStatRange,
            actRolloutDt: data.data.actRolloutDt,
            enabledDt: data.data.enabledDt,
            disableDt: data.data.disableDt,
            appPlfms: [],
            tagStory: data.data.tagStory,
            bizStmt: data.data.bizStmt,
            itStmt: data.data.itStmt,
            identifierFlag: data.data.identifierFlag
          }
          data.data.appPlfms.forEach(v => {
            this.editForm.appPlfms.push(v.appPlfmId)
            this.tagInfo.appPlfms.push(v.appPlfmNm)
          })
          if (data.data.tagStatusId)
            this.$emit('updateTagStatus', { tagStatus: data.data.tagStatusId, isModify: data.data.isModify })
          this.$nextTick(() => (this.formInfo = cloneDeep(this.editForm)))
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    submit() {
      let itStmt = new Buffer(this.editForm.itStmt).toString('base64')
      let ref = this.$parent.$parent.$parent.$parent
      ref.$refs['editForm'].validate(refValid => {
        if (refValid) {
          this.$refs['editForm'].validate(valid => {
            if (valid) {
              let appPlfms = []
              this.editForm.appPlfms.forEach(v => appPlfms.push({ appPlfmId: v }))
              this.loading = true
              this.$ajax({
                url: this.$ajax.setUrl('ast/astTag/updateBaseInfo'),
                method: 'post',
                data: this.$ajax.setData({
                  tagNm: ref.editForm.tagNm,
                  appPlfms: appPlfms,
                  bizStmt: this.editForm.bizStmt,
                  hqTagId: this.editForm.hqTagId,
                  clientStatRangeId: this.editForm.clientStatRange,
                  itStmt: itStmt,
                  tagId: this.tagId,
                  tagKindId: this.editForm.tagKindId,
                  tagStory: this.editForm.tagStory,
                  identifierFlag: this.editForm.identifierFlag
                })
              }).then(({ data }) => {
                if (data && data.code === '0') {
                  this.$message.success(data.msg)
                  this.changeEdit(false, ref.editForm.tagNm)
                  this.getDetail()
                  this.$emit('callback')
                } else {
                  this.$message.error(data.data || data.msg)
                }
                this.loading = false
              })
            }
          })
        }
      })
    },
    reset() {
      this.editForm.tagKindId = this.formInfo.tagKindId
      this.editForm.appPlfms = this.formInfo.appPlfms
      this.editForm.hqTagId = this.formInfo.hqTagId
      this.editForm.clientStatRange = this.formInfo.clientStatRange
      this.editForm.tagStory = this.formInfo.tagStory
      this.editForm.bizStmt = this.formInfo.bizStmt
      this.editForm.itStmt = this.formInfo.itStmt
      this.editForm.identifierFlag = this.formInfo.identifierFlag
    },
    clearForm() {
      this.editForm = {
        tagKindId: '',
        appPlfms: [],
        hqTagId: '',
        clientStatRange: '',
        tagStory: '',
        bizStmt: '',
        itStmt: '',
        identifierFlag: ''
      }
      this.tagInfo = {
        tagNm: '',
        tagKind: '',
        hqTag: '',
        clientStatRange: '',
        actRolloutDt: '',
        enabledDt: '',
        disableDt: '',
        appPlfms: [],
        tagStory: '',
        bizStmt: '',
        itStmt: '',
        identifierFlag: ''
      }
      if (this.editable) this.$nextTick(() => this.$refs['editForm'].clearValidate())
      this.editable = false
    },
    changeEdit(editable, tagNm) {
      this.reset()
      this.editable = editable
      let name = tagNm ? tagNm : this.tagInfo.tagNm
      this.$emit('changeEdit', editable, name)
    }
  }
}
</script>

<style lang="scss">
.information-basic {
  .el-textarea.is-disabled .el-textarea__inner {
    color: rgba($color: #000000, $alpha: 0.85);
  }
  .el-range-separator {
    width: 30px;
  }
  .row1 {
    height: 100px;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 0 0 0 150px;
    line-height: normal;
    text-align: center;
    box-shadow: #eee 0 0 10px;
    position: relative;
    .row1-left {
      font-weight: bold;
      width: 150px;
      height: 100%;
      line-height: 10px;
      padding-bottom: 10px;
      position: absolute;
      left: 0;
      svg {
        width: 50px;
        height: 50px;
        margin: 10px 0;
      }
    }
    .edit-content {
      height: 100%;
      text-align: left;
      padding: 10px;
      .el-form-item,
      .el-form-item__content {
        height: 100%;
        line-height: 25px;
      }
      .el-radio-group {
        width: 100%;
        height: 100%;
        overflow-y: auto;
      }
      .el-radio {
        margin-top: 10px;
      }
      &.range-content .el-radio {
        margin-top: 30px;
      }
      .el-range-editor.el-input__inner {
        width: 100%;
        background-color: rgba(255, 255, 255, 0.2);
      }
    }
    .row1-content {
      font-size: 20px;
      color: #000;
      line-height: 75px;
      text-align: center !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .row2 {
    margin-bottom: 20px;
    padding: 0 0 0 200px;
    border-bottom: 0;
    position: relative;
    &:before {
      width: 3px;
      height: 50px;
    }
    &:after {
      width: 3px;
      height: 30px;
    }
    .title {
      width: 200px;
      color: $theme-color;
      margin: 2px 0 18px 0;
      text-align: center;
      position: absolute;
      left: 0;
      svg {
        width: 50px;
        height: 50px;
        margin: 20px 0 10px 0;
      }
    }
    .content {
      height: auto;
      min-height: 150px;
      padding: 15px 15px 0 15px;
      text-align: left;
      border-left: 3px solid $border-color;
      position: relative;
      .el-form-item,
      .el-form-item__content {
        height: 100%;
        line-height: 25px;
      }
      .el-checkbox-group {
        height: 100%;
        overflow-y: auto;
      }
      .el-form-item {
        padding-bottom: 10px;
      }
      .el-form-item__error {
        top: calc(100% - 12px);
      }
      &:after {
        width: 3px;
        height: auto;
        content: '';
        position: absolute;
        top: 10px;
        left: -3px;
        bottom: 10px;
      }
      &.purpose:after {
        background-color: #a18cf1;
      }
      &.blue:after {
        background-color: #23ace3;
      }
    }
  }
  .el-select__tags-text {
    color: #000;
  }
  .el-switch {
    margin-top: 25px;
  }
}
</style>
